<template>
    <div class="yanqi">
        <!-- 顶部 -->
        <div class="top">
            <div class="callback" @click="$router.back()">
                <img src="@/assets/callback.png" alt="">
            </div>
            <div class="top-title">
                Rollover
            </div>
        </div>
        <div class="yanqi-desc">Payment has been completed and repayment isdelayed.</div>
        <div class="yanqi-content">
            <div class="yanqi-content-top">
                <div class="yanqi-content-top-desc">Pay now</div>
                <div class="yanqi-content-top-data">₹{{ o.loanAmount }}</div>
            </div>
            <div class="yanqi-content-bottom">
                <ul class="yanqi-content-bottom-left">
                    <li>Delayed date</li>
                    <li>Extend time</li>
                    <li>Recording delay(max.10000)</li>
                </ul>
                <ul class="yanqi-content-bottom-right">
                    <li>{{ new Date(o.expiryTime).toLocaleString() }}</li>
                    <li v-if="delayTimes === 1">{{ o.delayTerm }} 天</li>
                    <li v-else>{{ o.delayTerm }} 月</li>
                    <li>{{ delayTimes }} Time</li>
                </ul>
            </div>
            <!-- 按钮 -->
            <div class="yanqi-content-btn" @click="doClick">
                Need to repay loan ₹{{ o.loanAmount }}
            </div>
        </div>
        <!-- copycode -->
        <copycode></copycode>
    </div>
</template>
<script>
import copycode from '../components/copycode'
import { yanchiList, yanchisuan } from "../api";
import { jiami, jiemi } from "../utils/aeskey.js";
export default {
    components: { 'copycode': copycode },
    data() {
        return {
            o: {},
            //判断是天还是月
            delayTimes: ''
        }
    },
    methods: {
        //展期记录
        async getList() {
            const f = {
                model: {
                    orderId: ''
                }
            }
            f.model.orderId = this.$store.state.orderId
            const res = await yanchiList(jiami(f))
            console.log(jiemi(res.data),)
            this.o = jiemi(res.data).model.records[0]
            this.delayTimes = jiemi(res.data).model.delayTimes
        },
        //去还款
        doClick() {
            this.getyanqi()
            this.$router.push('/repayment')
        },
        //展期试算
        async getyanqi() {
            const f = {
                model: {
                    orderId: ''
                }
            }
            f.model.orderId = this.$store.state.orderId
            const res = await yanchisuan(jiami(f))
            console.log(jiemi(res.data), '展期试算结果')
        }
    },
    created() {
        this.getList()
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    }
}
</script>
<style lang="less" scoped>
@a: 3.75vw;

.yanqi {
    background-color: #f5f5f5;
    width: 100vw;
    height: (667/@a);
    padding-top: (56/@a);

    .yanqi-content {
        width: (330/@a);
        height: (260/@a);
        background-color: #fff;
        border-radius: (15/@a);
        margin-top: (10/@a);
        margin-left: (20/@a);

        .yanqi-content-top {
            height: (75/@a);
            background-color: #9f3dff;
            padding-top: (7/@a);
            border-radius: (15/@a) (15/@a) 0 0;

            .yanqi-content-top-desc {
                font-family: 'Inter';
                font-style: normal;
                font-weight: 400;
                font-size: (12/@a);
                color: #FFFFFF;
                margin-left: (145/@a);
            }

            .yanqi-content-top-data {
                font-family: 'Inter';
                font-style: normal;
                font-weight: 700;
                font-size: (24/@a);
                color: #FFFFFF;
                margin-top: (10/@a);
                margin-left: (120/@a);
            }
        }

        .yanqi-content-bottom {
            display: flex;
            padding-left: (10/@a);
            padding-right: (10/@a);
            box-sizing: border-box;

            .yanqi-content-bottom-left {
                width: 60%;

                li {
                    font-family: 'Inter';
                    font-style: normal;
                    font-weight: 400;
                    font-size: (12/@a);
                    color: #808080;
                }
            }

            .yanqi-content-bottom-right {
                width: 40%;

                li {
                    text-align: right;
                    font-family: 'Inter';
                    font-style: normal;
                    font-weight: 400;
                    font-size: (12/@a);
                    color: #202020;
                }
            }

            li {
                margin-top: (15/@a);
            }
        }

        .yanqi-content-btn {
            width: (288/@a);
            height: (44/@a);
            background-color: #9F3DFF;
            border-radius: (33/@a);
            text-align: center;
            line-height: (44/@a);
            margin-top: (35/@a);
            margin-left: (21/@a);

            font-family: 'Inter';
            font-style: normal;
            font-weight: 700;
            font-size: (16/@a);
            color: #FFFFFF;

        }
    }

    .yanqi-desc {
        height: (50/@a);
        background-color: #ede3f6;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: (14/@a);
        color: #9F3DFF;
        box-sizing: border-box;
        padding: (9/@a) (39/@a) (7/@a) (17/@a);
    }

    // 顶部
    .top {
        height: (56/@a);
        background-color: #fff;
        width: 100vw;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;

        .callback {
            margin-top: (20/@a);
            margin-left: (15/@a);
            width: (10/@a);

            img {
                width: 100%;
            }
        }

        .top-title {
            margin-top: (17/@a);
            margin-right: (150/@a);
            font-family: 'Inter';
            font-style: normal;
            font-weight: 400;
            font-size: (18/@a);
            color: #202020;
        }
    }
}
</style>